<script setup lang="ts">
import { ref, reactive } from "vue"
import { User, Lock } from "@element-plus/icons-vue"
import { ElMessage, type FormInstance, type FormRules } from "element-plus"
import { registerApi } from "@/api/login/index"
import { RegisterRequestData } from "@/api/login/types/login"
import { useRouter } from "vue-router"

const router = useRouter()

const loading = ref<boolean>(false)
const registerRef = ref<FormInstance | null>()
const registerFormData = reactive<RegisterRequestData>({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  userRole: "user"
})
const registerFormRules: FormRules = {
  userAccount: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  userPassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
  ],
  checkPassword: [
    {
      trigger: "blur",
      validator: (rule, val, cb) => {
        if (val === "") {
          cb(new Error("确认密码不能为空！"))
        } else if (val !== registerFormData.userPassword) {
          cb(new Error("两次输入的密码不一致！"))
        } else {
          cb()
        }
      }
    }
  ],
  userRole: [
    {
      trigger: "change",
      validator: (rule, val, cb) => {
        if (val === "") {
          cb(new Error("注册用户类型不能为空"))
        } else if (val !== "user" && val !== "company") {
          cb(new Error("注册用户类型有误"))
        } else {
          cb()
        }
      }
    }
  ]
}
const roleOptions = [
  {
    value: "user",
    label: "普通用户"
  },
  {
    value: "company",
    label: "企业用户"
  }
]

function handleRegister() {
  return registerRef.value?.validate((valid: boolean, fields) => {
    if (valid) {
      loading.value = true
      registerApi(registerFormData)
        .then(() => {
          ElMessage({
            message: "注册成功，正在前往登录页面",
            type: "success"
          })
          router.push({ path: "/login" })
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      console.error("表单校验不通过", fields)
    }
  })
}
</script>

<template>
  <div class="register-container">
    <div class="register-card">
      <div class="title">
        <span class="font-size-6">注 册</span>
        <router-link to="/login">登录</router-link>
      </div>
      <div class="content">
        <el-form ref="registerRef" :model="registerFormData" :rules="registerFormRules" @keyup.enter="handleRegister">
          <el-form-item prop="userAccount">
            <el-input
              v-model.trim="registerFormData.userAccount"
              placeholder="用户名"
              type="text"
              size="large"
              :prefix-icon="User"
              clearable
            />
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input
              v-model.trim="registerFormData.userPassword"
              placeholder="密码"
              type="password"
              size="large"
              :prefix-icon="Lock"
              clearable
            />
          </el-form-item>
          <el-form-item prop="checkPassword">
            <el-input
              v-model.trim="registerFormData.checkPassword"
              placeholder="确认密码"
              type="password"
              size="large"
              :prefix-icon="Lock"
              clearable
            />
          </el-form-item>
          <el-form-item prop="userRole">
            <el-select v-model.trim="registerFormData.userRole" placeholder="请选择注册类型" size="large" clearable>
              <el-option
                v-for="option in roleOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-button :loading="loading" type="primary" size="large" @click="handleRegister">确认注册</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.register-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  .register-card {
    width: 480px;
    max-width: 90%;

    border-radius: 20px;
    box-shadow: 0 0 10px #dcdfe6;
    overflow: hidden;
    background-color: var(--el-bg-color);
    > .title {
      display: flex;
      justify-content: space-between;
      align-items: end;
      height: 60px;
      padding: 0 50px;
      margin-bottom: 20px;
      vertical-align: bottom;

      a {
        color: rgb(105, 175, 19);
      }
    }

    > .content {
      padding: 20px 50px 50px 50px;
      .el-button {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
}
</style>
